<script setup>
import {onMounted} from 'vue'
import {
  NAvatar,
  NButton,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NSelect,
  NTabPane,
  NTabs,
  NTag,
  useMessage
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {getToken, renderIcon} from "@/utils";
import TheIcon from "@/components/icon/TheIcon.vue";
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
const base_path = import.meta.env.VITE_BASE
const message = useMessage()

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
    uploadAction: base_path+'/system/base/userimg',
    token: getToken(),
    card_loading1:false,
    card_loading2:false,
    card_loading3:false,
    card_loading4:false,
    select_customer:{
    name:"未选择",
    card_number:"--",
    user_level_name:"--",
    mobile:"--",
    bi_date:"--",
    sex:"--",
    hkqd:"--",
    age:"--",
    created_at:"--",
    last_come:"--",
    record_hobby:[],
    totals:{
    weimei:0,
    cdp:0,
    fujia:0,
    other:0,
    buy_money:0,
    cases:0,
    appoint_count:0,
    return_count:0,
    operation_count:0,
    face_count:0,
    test_count:0,
    having_customers:0,
    customers_level5:0

    }
    },
    hobby:[],
    new_hobby:"",
    customer_data:[],
    new_customer_data:"",
    customer_data3:[],
    new_customer_data3:"",
    customer_data1:[],
    new_customer_data1:"",
    images:[],
    files:[],
    show:false
});

onMounted(() => {
  data.select_customer = props.infoData
  on_ref()
})


function on_ref(){
  get_return()
}

function get_return(){
  data.card_loading1 = true
  api.getReturn({
    user_id:data.select_customer.user_id,
  }).then((res) => {
     data.hobby = res.data.items
     data.card_loading1 = false
  })
}


const handleFinish = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}

function go_cancel(item){
  api.deleteReturn({
    id:item.id,
  }).then((res) => {
    message.success('作废成功')
    on_ref()
  })
}

function create_tag(){

     if(!data.new_hobby){
       message.error('请先填写服务内容')
       return;
    }
     if(data.images){
       data.images = data.images.map(item => item.url);
     }
     if(data.files){
       data.files = data.files.map(item => item.url);
     }
    api.createReturn({
      user_id:data.select_customer.user_id,
      remark:data.new_hobby,
      images_pc:data.images,
      files_pc:data.files
    }).then((res) => {
      on_ref()
      message.success('添加成功')
      data.images = []
      data.new_hobby = ""
    })

}



</script>
<template>
  <div class="container" style="height: calc(100vh - 106px);">

        <n-spin :show="data.card_loading1" style="--n-opacity-spinning:0.1;">
          <n-scrollbar   v-if="data.hobby.length>0" style="max-height: calc(100vh - 185px);padding:0 20px 20px 0px">
           <n-card style="margin-bottom: 10px" embedded hoverable content-style="padding: 20px;" :segmented="{content: true,footer: 'soft',}" v-for="item in data.hobby">
                    <template #header>
                    <div style="display: flex; align-items: center;justify-content: flex-start">
                      <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                        <div style="display: flex">
                          <img style="width: 40px;height: 40px;border-radius: 50%;" :src="item.avatar">
                      <div style="height:40px;line-height:20px;margin-left: 10px">
                        <span  style="margin-right: 5px">
                          {{item.doctor_name}}
                        </span>
                        <br>
                        <span style="font-size: 12px;color:#747586">{{item.visit_date}}</span>
                      </div>
                        </div>
                      </n-h6>
                    </div>
                  </template>

                    <div>
                      <div>{{item.remark}}</div>
                      <div style="display: flex;margin-top: 10px">
                          <n-image style="height:60px;border-radius: 5px;margin-right: 2px"  :src="img" v-for="img in item.remark_images"/>
                    </div>
                    </div>
             <div style="margin-top: 10px">
              <n-popconfirm @positive-click="go_cancel(item)">
                <template #trigger>
                   <n-button  type="error" style="margin-right:10px">
                     <TheIcon icon="material-symbols:delete" :size="16" class="mr-5" />作废</n-button>
                </template>
                确定要作废该诊疗吗？
              </n-popconfirm>
            </div>
           </n-card>

          </n-scrollbar>
          <n-empty v-else description="暂无数据"  style="margin: 50px"></n-empty>
       </n-spin>

    <div class="add_return">
      <n-switch v-model:value="data.show">
      <template #checked>
        收起
      </template>
      <template #unchecked>
        添加
      </template>
    </n-switch>
    <n-collapse-transition :show="data.show">
       <div style="display: flex;align-items: center;padding: 10px">
          <n-input size="large" type="textarea" placeholder="新增治疗方案" style="background: #ddd" v-model:value="data.new_hobby"/>
          <NUpload :action="data.uploadAction" :headers="{ authorization: data.token }" multiple list-type="image-card"
                        @finish="handleFinish" v-model:file-list="data.images" style="margin:0 5px">
          </NUpload>
          <n-upload :headers="{ authorization: data.token }" v-model:file-list="data.files" multiple :action="data.uploadAction" @finish="handleFinish">
            <n-button>上传文件</n-button>
          </n-upload>
          <n-button size="large" type="info" style="margin:0 5px" @click="create_tag">
            <TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />保存</n-button>
       </div>
    </n-collapse-transition>


    </div>

 </div>
</template>


<style>
 .container{
   padding: 10px;
   //transform: translate(0);
   position: relative;
   height:100%;
   .search{
     margin-bottom: 10px;
   }
 }
 .add_return{

   position: absolute;
   bottom: 0;
   background: #eee;
   width: 100%;
   padding: 10px;
   border-top-left-radius: 5px;
 }
</style>